<template>
	<section class="todoapp">
		<!-- header -->
		<header class="header">
			<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo" />
		</header>
		<!-- main section -->
		<section v-show="todos.length" class="main">
			<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })" />
			<label for="toggle-all"></label>
			<ul class="todo-list">
				<todo v-for="(todo, index) in filteredTodos"
					  :key="index"
					  :todo="todo"
					  @toggletodo="toggleTodo"
					  @edittodo="editTodo"
					  @deletetodo="deleteTodo"></todo>
			</ul>
		</section>
		<!-- footer -->
		<footer v-show="todos.length" class="footer">
			<span class="todo-count">
				<strong>{{ remaining }}</strong>
				{{ remaining | pluralize('item') }} left
			</span>
			<ul class="filters">
				<li v-for="(val, key) in filters" :key="key">
					<a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
				</li>
			</ul>
			<!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
			  Clear completed
			</button> -->
		</footer>
	</section>
</template>

<script>
	const Todo = httpVueLoader('/vue/views/dashboard/admin/components/todolist/Todo.vue');

	const STORAGE_KEY = 'todos'
	const filters = {
		all: todos => todos,
		active: todos => todos.filter(todo => !todo.done),
		completed: todos => todos.filter(todo => todo.done)
	}
	const defalutList = [
		{ text: 'star this repository', done: false },
		{ text: 'fork this repository', done: false },
		{ text: 'follow author', done: false },
		{ text: 'vue-element-admin', done: true },
		{ text: 'vue', done: true },
		{ text: 'element-ui', done: true },
		{ text: 'axios', done: true },
		{ text: 'webpack', done: true }
	]
	module.exports = {
		components: { "todo": Todo },
		filters: {
			pluralize: (n, w) => n === 1 ? w : w + 's',
			capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
		},
		data() {
			return {
				visibility: 'all',
				filters,
				// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
				todos: defalutList
			}
		},
		computed: {
			allChecked() {
				return this.todos.every(todo => todo.done)
			},
			filteredTodos() {
				return filters[this.visibility](this.todos)
			},
			remaining() {
				return this.todos.filter(todo => !todo.done).length
			}
		},
		methods: {
			setLocalStorage() {
				window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
			},
			addTodo(e) {
				const text = e.target.value
				if (text.trim()) {
					this.todos.push({
						text,
						done: false
					})
					this.setLocalStorage()
				}
				e.target.value = ''
			},
			toggleTodo(val) {
				val.done = !val.done
				this.setLocalStorage()
			},
			deleteTodo(todo) {
				this.todos.splice(this.todos.indexOf(todo), 1)
				this.setLocalStorage()
			},
			editTodo({ todo, value }) {
				todo.text = value
				this.setLocalStorage()
			},
			clearCompleted() {
				this.todos = this.todos.filter(todo => !todo.done)
				this.setLocalStorage()
			},
			toggleAll({ done }) {
				this.todos.forEach(todo => {
					todo.done = done
					this.setLocalStorage()
				})
			}
		}
	}
</script>

<style>
	@charset "UTF-8";
	@import url(index.css);
</style>
